layui.define(["jquery"], function (exports) {
    "use strict";

    var $ = layui.$;

    var style_str =
        `.jmNav-peFoot {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 !important;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .jmNav-peFoot li a {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: normal;
        padding: 8px 20px !important;
    }

    .jmNav-peFoot * {
        font-size: 11px;
    }

    .jmNav-peFoot li a i {
        font-size: 24px;
    }

    .jmNav-peFoot .layui-this:after {
        top: 0;
    }

    .jmNav-peHead {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .jmNav-peHead li a {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 44px;
        padding: 0px 10px !important;
    }

    .jmNav-peHead * {
        font-size: 14px;
    }

    .jmNav-peHead i {
        font-size: 22px;
    }`

    $('head').append(`<style>${style_str}</style>`)

    var jmNav = {
        /**
         * 移动端底部导航
         * @param {*} obj 
         */
        peFoot: function (obj) {
            var id = obj.id;
            var thisId = obj.thisId || "1";
            var config = obj.config || [
                {
                    id: "1",
                    name: "首页",
                    href: "javascript:;",
                    icon: "layui-icon layui-icon-home",
                }
            ];
            var addClass = obj.addClass;
            var callback = obj.callback;

            var then = $("#" + id);
            var html = "";

            $.each(config, function (k, v) {
                html += `<li class="layui-nav-item ${v.id == thisId ? 'layui-this' : ''}">
                <a href="${v.href || 'javascript:;'}" data-id="${v.id}">
                    <i class="${v.icon}"></i>
                    <span>${v.name}</span>
                </a>
            </li>`;
            });

            then.html(`
            <ul class="layui-nav jmNav-peFoot ${addClass}" lay-filter="${id}">
            ${html}
            </ul>
            `);

            $("#" + id).on("click", "a", function () {
                $("#" + id + " a").parent().removeClass("layui-this");
                $(this).parent().addClass("layui-this");
                callback(this, config[$(this).parent().index()]);
            });
        },
        /**
         * 移动头部导航
         * @param {*} obj 
         */
        peHead: function (obj) {
            var id = obj.id;
            var then = $("#" + id);
            obj.left = obj.left || {};
            obj.right = obj.right || {};
            then.html(`
            <ul class="jmNav-peHead layui-nav">
                <li class="layui-nav-item">
                    <a href="${obj.left.href || 'javascript:;'}">
                        ${obj.left.text || ''}
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="${obj.left.href || 'javascript:;'}">
                        ${obj.center.text || ''}
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="${obj.right.href || 'javascript:;'}">
                        ${obj.right.text || ''}
                    </a>
                </li>
            </ul>
            `);

            $("#" + id).on("click", "li", function () {
                var data;
                switch ($(this).index()) {
                    case 0:
                        data = obj.left || '';
                        break;
                    case 1:
                        data = obj.center;
                        break;
                    case 2:
                        data = obj.right || '';
                        break;
                }
                obj.callback(this, data);
            })
        }
    }

    exports('jmNav', jmNav); // 输出模块
});  